<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h1 v-color='col'>{{name}}</h1>
    <h1 v-color v-font>{{name}}</h1>

    <button v-permission='1'>按钮1</button><!--   等级达到1的人能看-->
    <button v-permission='2'>按钮12</button><!--  等级达到2的人能看 -->
    <button v-permission='3'>按钮13</button><!--  等级达到3的人能看 -->
    <button v-permission='4'>按钮14</button><!--  等级达到4的人能看 -->
    <button v-permission='5'>按钮15</button> <!--  等级达到5的人能看 -->

  </div>
</body>

</html>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
  /* 
    自定义指令  全局自定义指令   私有自定义指令  ; 私有的等级要高于全局的

    我们可以借助自定义指令 去解决 权限的问题
  
  */
  var level = 1; // 表示用户的等级
  Vue.directive('color', function (el, obj) {

    el.style.color = obj.value || 'blue'
  })
  // Vue.directive('permission',function(el,obj){
  //   // bind 和 update的结合 不能保证父节点已经存在
  //   console.log(el,obj)
  //   if(obj.value <= level){
  //     // 用户等级够 就显示 
  //   }else{
  //     console.log(el)
  //     // el.style.display = 'none'
  //     // el.parentNode&&el.parentNode.removeChild(el)
  //   }
  // })

  Vue.directive('permission', {
    inserted(el, obj) {
      if (obj.value <= level) {
        // 用户等级够 就显示 
      } else {
        console.log(el)
        // el.style.display = 'none'
        el.parentNode&&el.parentNode.removeChild(el)
      }
    }
  })
  let vm = new Vue({
    el: '#app',
    directives:{
      // 私有自定义指令 只有当前实例实例自己能调用 其他的地方都不能使用
      color(el,obj){
        el.style.color= '#ccc'
      },
      font(el,obj){
        el.style.fontSize= '12px'
      }
    },
    data: {
      col: 'red',
      name: "珠峰"
    }
  });
</script>